<template>
	<view class="load-progress" :class="loadProgress>0?'show':'hide'" :style="[{top:CustomBar+'px'}]" v-if="loadProgress>0">
		<view class="load-progress-bar bg-blue " :style="[{transform: 'translate3d(-' + (100-loadProgress) + '%, 0px, 0px)'}]"></view>
		<!-- <view class="load-progress-spinner text-blue"></view> -->
	</view>
</template>

<script>
	export default {
		props:['showProgress'],
		data () {
			return {
				CustomBar: this.CustomBar,
				loadProgress: 0,
				timer: null,
				time: 0,
				transformSpeed: ''
			}
		},
		created () {
			if (this.showProgress) {
				this.reset()
				this.show()
			}
		},
		watch: {
			showProgress(val) {
				if (val) {
					this.reset()
					this.show()
				} else {
					this.remove()					
				}
			}
		},
		methods: {
			reset () {
				this.loadProgress = 0
				this.timer = null
				this.time = 50
			},
			show(e) {
				this.loadProgress += (100 - this.loadProgress) * 0.015
				this.timer = setTimeout(() => {
					this.show()
				}, this.time)
			},
			remove() {
				clearTimeout(this.timer)				
				this.transformSpeed = (100 - this.loadProgress) / 300
				this.time = 50
				this.transform()				
			},
			transform() {
				if (this.loadProgress < 100) {
					this.loadProgress += this.transformSpeed * this.time
					this.timer =  setTimeout(() => {
						this.transform()
					}, this.time)
				} else {
					clearTimeout(this.timer)
					setTimeout(() => {
						this.reset()
					}, 50)
				}
			}
		}
	}
</script>

<style lang="scss">
.load-progress	{
	// background-color: #0081ff;

	// background: linear-gradient(#0081ff, #fff)
	background: linear-gradient(rgba(0, 129, 255, 0.5), rgba(45, 204, 198, 0.5));
	// background: #1cbbb4;
	&-bar {
		background: linear-gradient(90deg, #2dccc6, rgba(255, 255, 255, 0.8));
	}
}
</style>